<template>
  <a-modal width="1100px" okText="确定添加"
    :visible="visible" title="选择账单" centered :destroyOnClose="true" :maskClosable="false"
    :confirmLoading='confirmLoading'
    @ok="handleOk"
    @cancel="handleCancel">
    <a-row style="margin-bottom:24px;">
      <a-col :span="24">
        <a-form layout="inline">
          <a-form-item label="收款单位">
            <a-input v-model="searchForm.custName" disabled=""/>
          </a-form-item>
          <a-form-item label="对账单编号">
            <a-input v-model="searchForm.billCode"/>
          </a-form-item>
          <a-form-item label="是否超期">
            <a-select v-model="searchForm.isOverTime" class="selectWidth">
              <a-select-option key="">全部</a-select-option>
              <a-select-option :key="1">是</a-select-option>
              <a-select-option :key="0">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="对账日期">
            <a-range-picker :value="searchForm.dateRange" @change="onDateChange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="handleSubmit">查询</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>

    <!-- 数据 -->
    <a-row class="orderItem ordertem_de">
      <a-col :span="24">
        <a-spin :spinning="spinning">
          <a-radio-group v-model="selectedBill" @change="onBillChange">
            <template v-if="tableData.length > 0">
              <div v-for="(item, index) in tableData" :key="index" style="margin-bottom:20px; border:1px #e8e8e8 solid;">
                <a-card size="small">
                  <template slot="title">
                    <a-radio :value="item.id" class="add_radip"></a-radio>
                    <span class="add_zhangd">
                    <a-descriptions :column="4" class="titleCard">
                      <a-descriptions-item label="对账单编号">
                        {{item.billCode}}
                      </a-descriptions-item>
                      <a-descriptions-item label="收款单位">
                        {{item.receivableCustName}}
                      </a-descriptions-item>
                      <a-descriptions-item label="付款单位">
                        {{item.payableCustName||'江苏佳特物流发展有限公司'}}
                      </a-descriptions-item>
                    </a-descriptions>
                    </span>
                  </template>
                  <!-- <template slot="extra"><a-radio :value="item.id"></a-radio></template> -->
                  <div class="order_detail order_detail_cd">
                    <a-descriptions :column="4" size="small">
                      <a-descriptions-item label="应收总金额">
                        <span class='t_money_fh'>{{amountType(item.currencyType)}} </span><span class='t_money'>{{item.totalAmount}}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="已收总金额">
                       <span class='t_money_fh'> {{amountType(item.currencyType)}} </span><span class='t_money'>{{item.alreadyAmount}}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="对账日期">
                        {{item.createTime}}
                      </a-descriptions-item>
                      <a-descriptions-item label="截止日期">
                        {{item.endDate}}
                      </a-descriptions-item>

                      <a-descriptions-item label="开票总金额">
                        <span class='t_money_fh'>{{amountType(item.currencyType)}} </span><span class='t_money'>{{item.invoiceAmount}}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="未收总金额">
                       <span class='t_money_fh'> {{amountType(item.currencyType)}} </span><span class='t_money'>{{item.remainingAmount}}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="开票日期">
                        {{item.lastInvoiceDate||'--'}}
                      </a-descriptions-item>
                      <a-descriptions-item label="结束日期">
                        {{item.completeTime||'--'}}
                      </a-descriptions-item>
                    </a-descriptions>
                  </div>
                </a-card>
                <a-card size="small" class="order_czuo">
                  <template slot="title">
                    <a-descriptions :column="12" class="titleCard">
                      <a-descriptions-item :span="2">
                        <span v-if="item.status===1" style="color: red">未结清</span>
                        <span v-if="item.status===2" style="color: green">已结清</span>
                      </a-descriptions-item>
                    </a-descriptions>
                  </template>
                </a-card>
              </div>
            </template>
          </a-radio-group>
          <div v-if="tableData.length === 0" style="margin: 0 24px 24px; padding: 20px 0; background: white;">
            <a-empty/>
          </div>
        </a-spin>
        <p class="orderPagination">
          <a-pagination
            show-size-changer
            show-quick-jumper
            :current="pagination.current"
            :total="pagination.total"
            :showTotal="pagination.showTotal"
            :pageSize="pagination.pageSize"
            @showSizeChange="pagination.onShowSizeChange"
            @change="pagination.onChange"/>
        </p>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import {queryBillList, addToBill} from '@/api/financialCenter'
// import {commonExport} from '@/api/request'

const defaultSearchForm = (cc) => {
  return {
    status: 1, // 1未结清，2已结清，不传为全部
    businessType: cc.businessType,
    feeType: cc.feeType, // 应收应付：1应收、2应付
    currencyType: cc.currencyType, // 币种：CNY、USD
    custName: cc.custName,
    billCode: '', // 对账编号
    receivableCustId: null, // 应收客户id
    payableCustI: null, // 应付客户id
    searchStartTime: null, // 对账日期查询，开始时间
    searchEndTime: null, // 对账日期查询，结束时间
    isOverTime: '', // 是否超期：1是，0否
    dateRange: [null, null]
  }
}

export default {
  name: 'addToBill-modal',
  props: {
    visible: Boolean,
    billCostIds: Array,
    cc: Object
  },
  data () {
    return {
      confirmLoading: false,
      searchForm: {},
      spinning: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      selectedBill: null
    }
  },
  methods: {
    amountType (currencyType) {
      return currencyType === 'CNY' ? 'RMB' : (currencyType === 'USD' ? 'USD' : '?')
    },
    onDateChange (date, dataStr) {
      this.searchForm.searchStartTime = dataStr[0]
      this.searchForm.searchEndTime = dataStr[1]
      this.searchForm.dateRange = [date[0], date[1]]
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    },
    handleSubmit () {
      this.spinning = true
      queryBillList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.spinning = false
        this.tableData = rsp.data.list
        this.pagination = this.getPagination(rsp.data)
      })
    },
    handleOk () {
      this.confirmLoading = true

      if (!this.selectedBill) {
        this.$message.error('请先选择账单')
        this.confirmLoading = false
      } else {
        const data = {billId: this.selectedBill, billCostIds: this.billCostIds}
        addToBill(data).then(rsp => {
          this.$message.success('添加账单成功')
          this.confirmLoading = false
          this.$emit('setVisible', true)
        }).catch(() => { this.confirmLoading = false })
      }
    },
    handleCancel () {
      this.$emit('setVisible')
    },
    onBillChange (e) {
      this.selectedBill = e.target.value
    }
  },
  created () {
    this.pagination = this.getPagination()
  },
  watch: {
    visible () {
      if (this.visible) {
        this.searchForm = defaultSearchForm(this.cc)
        this.selectedBill = null
        this.handleSubmit()
      }
    }
  }
}
</script>

<style>

.add_radip{ float: left; margin-left: 20px;}
.add_zhangd .titleCard{ float: left; width: 95%;}
</style>
